<template>
  <div id="wrapper">
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="primary">项目KPI看板</el-col></el-col>
    </el-row>
    <el-row>
        <el-col :xs="24" :sm="24" :lg="24" class="border"></el-col>
    </el-row>

    <!--<div class="tag">
      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="'AVG'"
            :title="'需求变更率'"
            :num="getNum(tagData.reqChangeProportion)"
            :sub="'%'"
            :to_sub="common.type3"
            :cls="common.success"
          ></info-label>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="'AVG'"
            :title="'需求基线率'"
            :num="getNum(tagData.baselineProportion)"
            :sub="'%'"
            :to_sub="common.type3"
            :cls="common.success"
          ></info-label>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="'AVG'"
            :title="'设计基线率'"
            :num="getNum(tagData.reqDesignProportion)"
            :sub="'%'"
            :to_sub="common.type3"
            :cls="common.success"
          ></info-label>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="'AVG'"
            :title="'需求引入有效bug率'"
            :num="getNum(tagData.reqBugProportion)"
            :sub="'%'"
            :to_sub="common.type3"
            :cls="common.success"
          ></info-label>
        </el-col>
      </el-row>

      <el-row :gutter="30">
        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="'AVG'"
            :title="'设计引入有效bug率'"
            :num="getNum(tagData.designBugProportion)"
            :sub="'%'"
            :to_sub="common.type3"
            :cls="common.success"
          ></info-label>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="6">
          <info-label
            :type="'AVG'"
            :title="'需求对应用例覆盖率'"
            :num="getNum(tagData.reqCaseProportion)"
            :sub="'%'"
            :to_sub="common.type3"
            :cls="common.success"
          ></info-label>
        </el-col>
      </el-row>
    </div>-->

    <div id="cursor" class="marT bgColor">
      <div class="ibox-title pad"></div>
      <el-row class="marT">
        <el-col :xs="24" :sm="24" :lg="24">
          <div class="filter" :class="{'filterFlex': radio == '1'}">
          <div class="bg">
            <el-radio v-model="radio" :label="true">
              
                <label for="bgSelect">部门选择:</label>
                <el-cascader 
                  :show-all-levels="false"
                  :disabled="!radio"       
                  v-model="obj.value"
                  :props="props"
                  :options="options"
                  collapse-tags
                  clearable
                  placeholder="所有部门"
                  id="bgSelect"
                  >
                </el-cascader>
              
            </el-radio>
            </div>
            <div class="bg">
            <el-radio v-model="radio" :label="false">
              <label>项目选择:</label>
              <el-select :disabled="radio" v-model="obj.valueProj" clearable filterable placeholder="请选择项目">
                <el-option
                  v-for="item in optionsProj"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              
            </el-radio>
            </div>

            <div v-show="radio" class="area">
              <label for="area">项目范围:</label>
              <el-select @change="changeArea" style="width: 70%;" id="area" v-model="obj.valueArea" clearable placeholder="项目范围选择">
                <el-option
                  v-for="item in optionsArea"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>

            <div :class="{'filterTime': radio}" class="bgTime">
              <label for="time">月份选择:</label>
              <el-date-picker
                id="time"
                v-model="obj.time"
                type="month"
                format="yyyy 年 MM 月"
                :default-value="new Date()"
                value-format="yyyy-MM"                
                placeholder="选择月份">
              </el-date-picker>
            </div>     
          </div>
        </el-col>
      </el-row>

      <el-tabs v-model="activeName" type="border-card" class="marT" style="margin: 20px 10px">
        <el-tab-pane label="需求" name="require">
          <el-table
            :border="true"         
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="list"                            
            style="width: 100%">
            <el-table-column 
              label="项目"
              align="center"
              prop="project_name"
              width="150"
              fixed
              >
            </el-table-column>
            <el-table-column                                 
              label="需求变更率"
              align="center"            
              prop="req_change_rate" 
              :formatter="formatter"                 
              >                            
            </el-table-column>
            <el-table-column                                 
              label="需求基线率"
              align="center"            
              prop="req_baseline_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="设计基线率"
              align="center"              
              prop="req_design_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="需求缺陷漏出率"
              align="center"              
              prop="req_bug_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>
            
            <el-table-column                                 
              label="OR测试用例需求覆盖度"
              align="center"              
              prop="req_or_case_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="SRS测试用例需求覆盖度"
              align="center"              
              prop="req_srs_case_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="AR测试用例需求覆盖度"
              align="center"              
              prop="req_ar_case_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>
          </el-table>
          <el-pagination
            class="marT"
            :small="true"
            background
            v-show="tableTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableCurrent"
            :page-size="tableSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="测试" name="test">
          <el-table
            :border="true"   
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="list"                            
            style="width: 100%">
            <el-table-column 
              label="项目"
              align="center"
              prop="project_name"
              width="150"
              fixed
              >
            </el-table-column>
            <el-table-column                                 
              label="Bug流程符合度"
              align="center"              
              prop="bug_flow_conformity" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="缺陷拦截率"
              align="center"             
              prop="bug_escape_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="Degrade bug率"
              align="center"             
              prop="bug_degrade_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="设计缺陷漏出率"
              align="center"              
              prop="design_bug_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>

            <el-table-column                                 
              label="开发效率"
              align="center"             
              prop="develop_efficient" 
              :formatter="formatter"                                   
              >                  
            </el-table-column>
            <el-table-column                                 
              label="测试执行效率"
              align="center"             
              prop="test_execution_efficient" 
              :formatter="formatter"                                   
              >                  
            </el-table-column>
          </el-table>
          <el-pagination
            class="marT"
            :small="true"
            background
            v-show="tableTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableCurrent"
            :page-size="tableSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="客户投诉" name="customer_complaint">
          <el-table           
            :border="true"
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="list"                            
            style="width: 100%">
            <el-table-column 
              label="项目"
              align="center"
              prop="project_name"
              width="150"
              fixed
              >
            </el-table-column>
            <el-table-column                                 
              label="客户投诉次数"
              align="center" 
              prop="complaint_count"                                                 
              >               
            </el-table-column>
          </el-table>
          <el-pagination
            class="marT"
            :small="true"
            background
            v-show="tableTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableCurrent"
            :page-size="tableSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="发布流程" name="release">
          <el-table
            :border="true"            
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="list"                            
            style="width: 100%">
            <el-table-column 
              label="项目"
              align="center"
              prop="project_name"
              width="150"
              fixed
              >
            </el-table-column>
            <el-table-column                                 
              label="内、外部发版一次成功率"
              align="center"              
              prop="in_out_release_pass_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>
            <el-table-column                                 
              label="(平均每个项目)内部版本数"
              align="center"              
              prop="version_count"                                    
              >                  
            </el-table-column>
            <el-table-column                                 
              label="Release流程符合度"
              align="center"              
              prop="release_flow_conformity" 
              :formatter="formatter"                 
              >                  
            </el-table-column>            
            <el-table-column                                 
              label="一次发版成功率"
              align="center"             
              prop="release_pass_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>
          </el-table>
          <el-pagination
            class="marT"
            :small="true"
            background
            v-show="tableTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableCurrent"
            :page-size="tableSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="阶段点评审" name="period">
          <el-table
            :border="true"            
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="list"                            
            style="width: 100%">
            <el-table-column 
              label="项目"
              align="center"
              prop="project_name"
              width="150"
              fixed
              >
            </el-table-column>
            <el-table-column                                 
              label="阶段点一次评审通过率"
              align="center"              
              prop="period_review_pass_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>
          </el-table>
          <el-pagination
            class="marT"
            :small="true"
            background
            v-show="tableTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableCurrent"
            :page-size="tableSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="风险" name="risk">
          <el-table
            :border="true"          
            :header-cell-style="{background:'#eef1f6'}"
            v-loading="tableLoading"
            :data="list"                            
            style="width: 100%">
            <el-table-column 
              label="项目"
              align="center"
              prop="project_name"
              width="150"
              fixed
              >
            </el-table-column>
            <el-table-column                                 
              label="风险关闭率"
              align="center"              
              prop="risk_close_rate" 
              :formatter="formatter"                 
              >                  
            </el-table-column>
          </el-table>
          <el-pagination
            class="marT"
            :small="true"
            background
            v-show="tableTotal > 10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tableCurrent"
            :page-size="tableSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableTotal">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import common from '@/components/devops/get_data'
import http from '@/views/sys/axios'
import VTable from '@/components/charts/table'
import InfoLabel from '@/components/devops/info_label'
import { mapState, mapMutations } from 'vuex'

export default {
  name: 'ProjectKpi',
  components: {
    VTable,
    InfoLabel
  },
  data() {
    return {
      common,
      radio: true,
      props: { multiple: true },
      tagData: {},
      activeName: 'require',
      genreList: [],
      obj: {
        value: [],
        valueProj: '',
        valueArea: 0,
        time: this.getTime()
      },     
      options: [],
      optionsProj: [],
      tableData: {},
      tableLoading: false,
      tableTotal: 0,
      tableCurrent: 1,
      tableSize: 10,
      optionsArea: [
        {
          value: 2,
          label: '实施中项目'
        },
        {
          value: 1,
          label: '结项项目'
        },
        {
          value: 0,
          label: '所有项目'
        }
      ]     
    }
  },
  created() {
    this.radio = this.filters.radio
    this.filtersList()
    this.getTime()   
    if(this.radio) {
      this.init()
    } else {
      this.initProj()
    }
  },
  computed: {
    ...mapState({
      filters: state => state.filters,
      allDepartmentList: state => state.allDepartmentList
    }),
    list() {
      if(JSON.stringify(this.tableData) !== "{}") {
        return this.tableData[this.activeName].slice((this.tableCurrent-1)*this.tableSize, this.tableCurrent*this.tableSize)
      } else {
        return []
      }
    },
    valIndex() {
      let index = ''
      this.optionsProj.forEach((el) => {
          if(el.label == this.val) {
              index = el.value
          }
      })
      return index
   }
  },
  methods: {
    ...mapMutations([
      'setParams',
      'setAll'
    ]),
    getNum(num) {
      let number
      num ? number = num : number = 0
      return number
    },
    getTime() {
      let now = new Date()
      let startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth())).toISOString().slice(0, 7)
      return startDate
    },
    formatter(row, column, cellValue, index) {
      let percent
      cellValue ? percent = (cellValue * 100).toFixed(2) + '%' : percent = '0.00%'
      return percent
    },
    changeArea(val) {
      this.tableCurrent = 1
    },
    filtersList() {
      http.get(`/api/account/personal_group_dept`).then(res => {
        if(res.code == 200) {
          this.options = res.dept_info
          this.optionsProj = res.project_info
        }
      })
    },
    init() {
      let id = ''
      if(this.filters.departmentId.length) {
        id = this.filters.departmentId
        this.obj.value = this.filters.departList
      }
      this.tableLoading = true
      http.get(`/api/summary/statistic/req?departmentId=${id}&scope=${this.obj.valueArea}&time=${this.obj.time}`).then(res => {
        if(res.code == 200) {
          this.tableData = res.data  
          // let arrs = Object.keys(this.tableData)
          // .map(item => {
          //   let val
          //   switch (item) {
          //     case 'require':
          //       val = '需求';
          //       break;
          //     case 'test':
          //       val = '测试';
          //       break;
          //     case 'customer_complaint':
          //       val = '客户投诉';
          //       break;
          //     case 'release':
          //       val = '发布流程';
          //       break;
          //     case 'period':
          //       val = '阶段点评审';
          //       break;
          //     default :
          //       val = '风险';
          //       break;
          //   }
          //   return {
          //     value: item,
          //     label: val
          //   }
          // })
          // this.genreList = arrs     
          this.tableTotal = this.tableData[this.activeName].length
          this.tableLoading = false
        } else {
          this.tableLoading = false
        }
      })
    },
    initProj() {
      let projId = ''    
      if(this.filters.projectId) {
        projId = this.filters.projectId
        this.obj.valueProj = this.filters.projectId
      }
      
      this.tableLoading = true
      http.get(`/api/summary/statistic/req?projectId=${projId}&time=${this.obj.time}`).then(res => {
        if(res.code == 200) {
          this.tableData = res.data
          this.tableTotal = this.tableData.length
          this.tableLoading = false
        } else {
          this.tableLoading = false
        }
      })
    },
    handleSizeChange(val) {
      this.tableSize = val
    },
    handleCurrentChange(val) {
      this.tableCurrent = val
    }
  },
  watch: {
    obj: {
      handler: function() {
        this.$nextTick(() => {
          let id, projId, time, departmentId = '', departList = [], projectName = '', boolRadio, dateTimes = []
          if(this.obj.value.length) {
            id = this.obj.value.map(item => item[1])
          } else {
            id = []
          }
          if(this.obj.valueProj) {
            projId = this.obj.valueProj
            if(this.optionsProj.length) {
              projectName = this.optionsProj.filter(item => item.value == projId)[0].label
            } else {
              projectName = this.filters.projectName
            }
          } else {
            projId = ''
            projectName = ''
          }
          this.filters.dateTime ? time = this.filters.dateTime.join(',') : time = ''
          dateTimes = this.filters.dateTime
          boolRadio = this.radio
          departmentId = id             
          departList = this.obj.value
          let project = projId
          this.setParams({
            time,
            departmentId,
            departList,
            projectName,
            projectId: project,
            radio: boolRadio,
            dateTimes
          })
          if(this.radio) {
            this.init()
          } else {
            this.initProj()
          } 
        })            
      },
      deep: true
    },
    activeName(newVal) {
      if(newVal) {
        this.tableCurrent = 1
        this.tableSize = 10
      }
    },
    radio(val) {
      if(!this.radio && !this.obj.valueProj && !this.filters.projectId) {
        if(this.optionsProj && this.optionsProj.length) {
          this.obj.valueProj = this.optionsProj[0].value
        }
      }
      if(val) {
        this.init()
      } else {
        this.initProj()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import '../../assets/common/common.scss';
  #wrapper{
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
  } 
  /deep/ .el-table th.gutter{
    display: table-cell!important;
  }
  .border{
      box-sizing: content-box;
      height: 0;
      overflow: visible;
      margin-top: 1rem;
      margin-bottom: 1rem;
      border: 0;
      border-top: 1px solid rgba(0,0,0,.1);
  }
  .primary{
      color: #409EFF;
      font-size: 30px;
      margin-top: 20px;
      margin-bottom: 10px;
      font-weight: 400;
  }
  .bgColor{
      background: #fff;
  }
  .pad{
      padding: 0 20px;
      padding-top: 20px;
  }
  .marT{
      margin-top: 20px;
  }
  label{
    font-size: 14px;
    margin: auto 0;
    margin-right: 5px;
  }
  
  .filter{
    display: flex;
    flex-wrap: nowrap;
    // justify-content: center;
    align-items: center;
    padding: 0 20px;
    .bg{
      flex: 0 0 400px;
      #bgSelect{
        width: 80%;
      }  
    }
    .area{
      flex: 0 0 270px;
      display: flex;
      flex-wrap: nowrap;
      margin-right: 20px;
      #area{
        width: 50%;
      }
    }
    .bgTime{
      flex: 0 0 400px;     
      #time{
        width: 70%;
      }
    }
  }
  .filterFlex{
    flex-wrap: wrap;
  }
  .filterTime{
    margin-top: 10px;
    padding-left: 20px;
  }
</style>